<template lang="pug">
.app-container
  //- 查询操作
  div.filter-container
      el-input(v-model="listQuery.username" clearable style="width: 200px;" placeholder="请输入帐号名").filter-item
      el-button( type="primary" icon="el-icon-search" ).filter-item.ml-5 查找
      el-button( type="primary" icon="el-icon-edit" @click="onCreate").filter-item.ml-5 增加帐号

  el-table(
    v-loading="listLoading",
    :data="list",
    element-loading-text="正在加载中。。。",
    border,
    fit,
    highlight-current-row
  )
    el-table-column(align="center", label="ID", width="95", type="index")
    el-table-column(label="标题", prop="title")
    el-table-column(label="作者", width="110", align="center", prop="author")
    el-table-column(label="访问量", width="110", align="center", prop="pageviews")
    el-table-column(
      label="状态",
      width="110",
      align="center",
      class-name="status-col"
    )
      template(slot-scope="scope")
        el-tag(:type="scope.row.status | statusFilter") {{ scope.row.status }}
    el-table-column(label="时间", width="200", align="center", prop="created_at")
      template(slot-scope="scope")
        i.el-icon-time
        span {{ scope.row.display_time }}
    //- el-table-column.small-padding.fixed-width(align="center", label="操作")
    //-   template(slot-scope="scope")
    //-     el-button(
    //-       v-permission="['operation:designer:download']",
    //-       type="primary",
    //-       size="mini",
    //-       @click="onUpdate(scope.row)"
    //-     ) 修改
    //-     el-button(
    //-       v-permission="['operation:designer:delete']",
    //-       type="danger",
    //-       size="mini",
    //-       @click="onDelete(scope.row)"
    //-     ) 删除
  el-dialog(title="dialogStatus" :visible.sync="dialogFormVisible")
    el-form(ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="130px" style="width: 400px; margin-left:50px;")
      el-form-item(label="作者名称" prop="author")
        el-input(v-model="dataForm.author")
    //- el-form(ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="130px" style="width: 400px; margin-left:50px;")
        //- el-form-item(label="登录名(联系手机)" prop="username")
        //- el-input(:disabled="dialogStatus === 'update'" v-model="dataForm.username"  auto-complete="off")
        //- el-form-item(label="作者简介" prop="desc")
        //-     el-input(v-model="dataForm.desc"  auto-complete="off")
        //- el-form-item(label="密码" prop="password")
        //-     el-input(v-model="dataForm.password" auto-complete="off" show-password)
    //- div(slot="footer").dialog-footer
    //-     el-button(@click="dialogFormVisible = false") 取消
    //-     el-button(v-if="dialogStatus=='create'" type="primary" @click="onCreateData") 确定
    //-     el-button(v-else type="primary" @click="onUpdateData") 确定
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        username: '',
        sort: "add_time",
        order: "desc"
      },
      dialogStatus: 'create',
      //- 弹出层
      dialogFormVisible: false,
      dataForm: {
        author: '1111111',
        dsn_id: undefined,
        username: undefined,
        password: undefined,
        desc: undefined
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    resetForm() {
      this.dataForm = {
        dsn_id: undefined,
        username: undefined,
        password: undefined,
        desc: undefined
      };
    },
    onCreate() {
      this.resetForm();
      this.dialogFormVisible = true;
      this.dialogStatus = "create";
      // this.$nextTick(() => {
      //   this.$refs["dataForm"].clearValidate();
      // });
    },

    onCreateData() {
      this.dialogFormVisible = false;
      // this.$refs["dataForm"].validate(async valid => {
      //   if (valid) {
      //     const resp = await createDesigner(this.dataForm);
      //     this.list.unshift(resp.data.data);
      //     this.dialogFormVisible = false;
      //     this.$notify.success({
      //       title: "成功",
      //       message: "添加设计师帐号成功"
      //     });
      //   }
      // });
    },
    onUpdateData() {
      this.dialogFormVisible = false;
      // this.dataForm = Object.assign({}, row);
      // this.dialogFormVisible = true;
      // this.dialogStatus = "update";
      // this.$nextTick(() => {
      //   this.$refs["dataForm"].clearValidate();
      // });
    },
  }
}
</script>

<style scoped lang='scss'>
.filter-container {
  padding-bottom: 10px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}
.ml-5 {
  margin-left: 5px !important;
}
</style>
